import React, { useState } from 'react';
import { useSearchParams } from 'react-router-dom';
import { SearchBox } from '../components/SearchBox';
import { SearchSuggestions } from '../components/SearchSuggestions';
import { ResultCard } from '../components/ResultCard';
import { Database, Loader2 } from 'lucide-react';
import { useSearch } from '../hooks/useSearch';

export function Home() {
  const [searchParams, setSearchParams] = useSearchParams();
  const query = searchParams.get('q') || '';
  const { results, loading, loadMore } = useSearch(query);

  const handleSearch = (newQuery: string) => {
    setSearchParams({ q: newQuery });
  };

  return (
    <div className="min-h-screen bg-gradient-to-b from-blue-50 to-white">
      <div className="container mx-auto px-4 py-16">
        <div className="max-w-4xl mx-auto text-center">
          <div className="flex items-center justify-center gap-3 mb-6">
            <Database className="w-12 h-12 text-blue-500" />
            <h1 className="text-4xl font-bold text-gray-900">数据图表查询</h1>
          </div>
          <p className="text-xl text-gray-600 mb-8">查找任何你想到的统计图表</p>
          
          <SearchBox onSearch={handleSearch} />
          <SearchSuggestions onSelect={handleSearch} />
        </div>

        {query && (
          <div className="mt-12">
            <div className="grid grid-cols-2 gap-6">
              {results.map(result => (
                <ResultCard key={result.id} data={result} />
              ))}
            </div>
            
            {loading && (
              <div className="flex justify-center py-8">
                <Loader2 className="w-8 h-8 animate-spin text-blue-500" />
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
}
